<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="请输入关键字"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="识别日期" prop="dateRange">
          <el-date-picker
            v-model="queryParams.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            clearable
          />
        </el-form-item>
        <el-form-item label="扫描来源类型" prop="referType">
          <el-select v-model="queryParams.referType" placeholder="请选择来源类型" style="width: 200px" clearable>
            <el-option
              v-for="item in FaceScanReferType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="已通过识别" prop="isPassed">
          <el-select v-model="queryParams.isPassed" placeholder="请选择是否识别通过" style="width: 200px" clearable>
            <el-option label="是" value="true"> </el-option>
            <el-option label="否" value="false"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <i-ep-search />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <i-ep-refresh />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <el-table v-loading="loading" :data="tableList" highlight-current-row border>
        <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
        <el-table-column key="personName" label="人员姓名" align="center" prop="personName" width="" />
        <el-table-column key="idCard" label="身份证号码" align="center" width="200" prop="idCard">
          <template #default="scope">
            <el-link type="primary" @click="showAvatar(scope.row.id)">{{ scope.row.idCard }}</el-link>
          </template>
        </el-table-column>
        <el-table-column key="similarity" label="相似性" width="" align="center" prop="similarity" />
        <el-table-column key="referTypeName" label="扫描来源类型" width="" align="center" prop="referTypeName" />
        <el-table-column key="dataSourceName" label="数据来源" width="" align="center" prop="dataSourceName" />
        <el-table-column key="createTime" label="识别时间" width="150" align="center" prop="createTime" />
        <el-table-column key="verifyTime" label="验证时间" width="150" align="center" prop="verifyTime" />
        <el-table-column key="isConfirmed" label="是否已确认" width="" align="center" prop="isConfirmed">
          <template #default="scope">
            <el-tag :type="scope.row.isConfirmed ? '' : 'danger'">{{ scope.row.isConfirmed ? "是" : "否" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column key="confirmTime" label="确认时间" align="center" width="150" prop="confirmTime" />
        <el-table-column key="isPassed" label="已通过识别" width="" align="center" prop="isPassed">
          <template #default="scope">
            <el-tag :type="scope.row.isPassed ? '' : 'danger'">{{ scope.row.isPassed ? "是" : "否" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button type="primary" size="small" link @click="openDialog(scope.row)"> <i-ep-grid />详情 </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageIndex"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>

    <el-image-viewer v-if="isAvatar" :url-list="avatarImage" @close="viewerClose"></el-image-viewer>

    <!-- 表单弹窗 -->
    <el-dialog
      v-model="dialog.visible"
      title="详情"
      class="system"
      draggable
      close-icon="CloseBold"
      @close="closeDialog"
    >
      <el-form ref="roleFormRef" style="height: 250px" label-width="100px">
        <el-row :gutter="24">
          <el-col :rowspan="24">
            <el-text class="mx-1" size="large">{{ personFaceRecordForm.personName }}：</el-text>
            <el-text class="mx-1" size="large" type="success">{{ personFaceRecordForm.idCard }}</el-text>
          </el-col>
          <el-col :span="8">
            <figure style="text-align: center">
              <img :src="idCardPhoto" alt="身份证照片" style="width: 120px" />
              <figcaption>身份证照片</figcaption>
            </figure>
          </el-col>
          <el-col :span="8">
            <figure style="text-align: center">
              <img :src="verifyPhoto" onerror="this.src='/static/jpg/avatar.jpg'" style="width: 120px" />
              <figcaption>当前核验照片</figcaption>
            </figure>
          </el-col>
          <el-col :span="8">
            <figure style="text-align: center">
              <img :src="cameraPhoto" alt="识别照片" style="width: 120px" />
              <figcaption>识别照片</figcaption>
              <el-button type="primary" @click="replacePhoto">替换为核验照片</el-button>
            </figure>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <!-- <el-button type="primary" @click="handleSubmit">确 定</el-button> -->
          <el-button @click="closeDialog()">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
export default {
  name: "Facerecord",
};
</script>

<script lang="ts" setup>
import { PersonFaceRecordForm, ParamsType } from "@/api/system/face/types";
import {
  getFaceRecordList,
  getFaceRecordImageById,
  getImageByIdCard,
  getImageByIdCardVerify,
  updatePersonFacePhoto,
} from "@/api/system/face/index";
import { getDicts } from "@/store/modules/dict";

const total = ref(0);
const loading = ref(false);
const queryFormRef = ref(ElForm);
const idCardPhoto = ref("");
const cameraPhoto = ref("");
const verifyPhoto = ref("");
const idCard = ref("");
const tableList = ref<PersonFaceRecordForm[]>();

const personFaceRecordForm = ref<PersonFaceRecordForm>();
const queryParams = reactive<ParamsType>({
  pageIndex: 1,
  pageSize: 20,
});
const dialog = reactive<DialogOption>({
  visible: false,
  title: "记录详情信息",
});

const dialogDetail = reactive<DialogOption>({
  visible: false,
  title: "记录详情信息",
});

/* 列表查询 */
async function handleQuery() {
  loading.value = true;
  if (queryParams.dateRange && queryParams.dateRange.length > 0) {
    queryParams.startTime = queryParams.dateRange[0];
    queryParams.endTime = queryParams.dateRange[1];
  } else {
    queryParams.startTime = "";
    queryParams.endTime = "";
  }
  let list = await getFaceRecordList(queryParams);
  if (list.type === 0) {
    if (list.success) {
      tableList.value = list.data.list;

      queryParams.pageIndex = list.data.pageNum;
      queryParams.pageSize = list.data.pageSize;
      total.value = list.data.total;
    } else {
      ElMessage.error(list.msg);
    }
  } else {
    ElMessage.error(list.msg);
  }
  loading.value = false;
}

/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageIndex = 1;
  queryParams.pageSize = 20;
  queryParams.startDate = null;
  queryParams.endDate = null;
  handleQuery();
}

const avatarImage = ref([]);
const isAvatar = ref(false);
function showAvatar(id) {
  avatarImage.value = [];
  isAvatar.value = true;
  getFaceRecordImageById(id).then((data) => {
    avatarImage.value.push(data.data);
  });
}

function viewerClose() {
  isAvatar.value = false;
}

onMounted(async () => {
  handleQuery();
});

/**
 * 关闭弹窗
 */
function closeDialog() {
  dialog.visible = false;
}
/**
 * 打开角色表单弹窗
 *
 * @param roleId
 */
function openDialog(row?: any) {
  personFaceRecordForm.value = row;
  idCardPhoto.value = "/static/jpg/avatar.jpg";
  cameraPhoto.value = "/static/jpg/avatar.jpg";
  verifyPhoto.value = "/static/jpg/avatar.jpg";
  idCard.value = row.idCard;
  dialog.visible = true;
  getImageByIdCard(row.idCard).then((data) => {
    idCardPhoto.value = data.data;
  });
  getImageByIdCardVerify(row.idCard).then((data) => {
    verifyPhoto.value = data.data;
  });
  getFaceRecordImageById(row.id).then((data) => {
    cameraPhoto.value = data.data;
  });
}

function replacePhoto() {
  ElMessageBox.confirm("确定要替换当前识别照片为核验照片吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // loading.value = true;
      updatePersonFacePhoto(personFaceRecordForm.value.id, personFaceRecordForm.value.idCard)
        .then((resp) => {
          if (resp.success === true) {
            ElMessage.success(resp.msg);
            verifyPhoto.value = cameraPhoto.value;
          } else {
            ElMessage.warning(resp.msg);
          }
					loading.value = false;
        })
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消！",
      });
    });
}

// function errorimg(){
// 	return this.src="/static/jpg/avatar.jpg";
// }

const FaceScanReferType = getDicts("faceScanReferType");
</script>

<style lang="less" scoped>
//   img {
//         /* 设置默认图片路径 */
//         background-image: url("https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png");
//         /* 设置默认图片的大小 */
//         width: 50px;
//         height: 120px;

//     }
</style>
